<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声级计实时预览</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
        <a class="navbar-brand" href="#">声级计后台管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#" onclick="showTab('realtime')">实时预览</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="showTab('settings')">设备设置</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="showTab('history')">历史数据</a>
            </li>
            </ul>
        </div>
        </div>
  </nav>

<!-- 实时预览 -->
<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">实时预览
                    <div class="float-end">
                        <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="dataToggle" checked>
                        <label class="form-check-label" for="dataToggle">数据获取</label>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="realtime-chart" style="height: 300px;"></div>
                    <div class="mt-3">
                        <label for="updateInterval" class="form-label">更新间隔 (毫秒)</label>
                        <input type="number" class="form-control" id="updateInterval" value="2000" min="500">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

  <!-- 设备设置 -->
  <div class="container mt-5" id="settings" style="display: none;">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            串口设置
          </div>
          <div class="card-body">
            <!-- 设备设置表单内容 -->
            <form action="#">
                <div class="form-group">
                  <label for="port">串口号：</label>
                  <select id="port" name="port" class="form-control">
                    <option value="/dev/ttyS0">/dev/ttyS0</option>
                    <!-- 其他串口号选项可以在这里添加 -->
                  </select>
                </div>
                <div class="form-group">
                  <label for="baudrate">波特率：</label>
                  <select id="baudrate" name="baudrate" class="form-control">
                    <option value="9600">9600</option>
                    <option value="19200">19200</option>
                    <option value="38400">38400</option>
                    <option value="57600">57600</option>
                    <option value="115200">115200</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="data_bits">数据位：</label>
                  <select id="data_bits" name="data_bits" class="form-control">
                    <option value="8">8位</option>
                    <option value="7">7位</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="parity">校验位：</label>
                  <select id="parity" name="parity" class="form-control">
                    <option value="None">无</option>
                    <option value="Even">偶校验</option>
                    <option value="Odd">奇校验</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="stop_bits">停止位：</label>
                  <select id="stop_bits" name="stop_bits" class="form-control">
                    <option value="1">1位</option>
                    <option value="2">2位</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="flow_control">流控位：</label>
                  <select id="flow_control" name="flow_control" class="form-control">
                    <option value="None">无</option>
                    <option value="RTS/CTS">RTS/CTS</option>
                    <option value="XON/XOFF">XON/XOFF</option>
                  </select>
                </div>
                <div class="form-group">
                  <button type="button" class="btn btn-primary" onclick="get_Serial_port_info()">保存设置</button>
                  <button type="button" class="btn btn-secondary">刷新配置</button>
                  <button type="button" class="btn btn-info" onclick="displayDate()">显示日期</button>
                </div>
                <div class="form-group">
                  <p id="time" class="mt-3"></p>
                </div>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 历史数据 -->
  <div class="container mt-5" id="history" style="display: none;">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            历史数据
          </div>
          <div class="card-body">
            <!-- 历史数据表格内容 -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- Chart.js for real-time chart -->
  <script src="https://cdn.staticfile.org/chart.js/3.7.1/chart.min.js"></script>
  <!-- Custom JS for real-time chart and tab switching -->
  <script>
    const ctx = document.getElementById('realtime-chart').getContext('2d');
    const realtimeChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          label: '声级(dB)',
          data: [],
          fill: false,
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1
        }]
      },
      options: {
        scales: {
          x: {
            type: 'realtime',
            realtime: {
              onRefresh: function(chart) {
                if (document.getElementById('dataToggle').checked) {
                  chart.data.datasets.forEach(function(dataset) {
                    dataset.data.push({
                      x: Date.now(),
                      y: Math.random() * 100 // 假设的声级数据
                    });
                  });
                }
              },
              delay: parseInt(document.getElementById('updateInterval').value)
            },
            bounds: 'data'
          },
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // 监听更新间隔输入框的变化
    document.getElementById('updateInterval').addEventListener('change', function() {
      const newInterval = parseInt(this.value);
      if (!isNaN(newInterval) && newInterval >= 500) {
        realtimeChart.options.scales.x.realtime.delay = newInterval;
      }
    });

    function get_Serial_port_info() {
      // 获取表单数据
      const port = document.getElementById('port').value;
      const baudrate = document.getElementById('baudrate').value;
      const data_bits = document.getElementById('data_bits').value;
      const parity = document.getElementById('parity').value;
      const stop_bits = document.getElementById('stop_bits').value;
      const flow_control = document.getElementById('flow_control').value;

      // 这里可以添加代码将获取到的数据发送到服务器或者进行其他操作
      console.log('串口号:', port);
      console.log('波特率:', baudrate);
      console.log('数据位:', data_bits);
      console.log('校验位:', parity);
      console.log('停止位:', stop_bits);
      console.log('流控位:', flow_control);

      // 示例：显示一个确认保存的消息（实际应用中可能需要更复杂的处理）
      alert('串口设置已保存！');
    }
    function displayDate() {
      // 显示当前日期和时间
      const now = new Date();
      const dateString = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
      document.getElementById('time').textContent = dateString;
    }

    function showTab(tabId) {
      // 隐藏所有内容
      document.querySelectorAll('.container.mt-5').forEach(function(tabContent) {
        tabContent.style.display = 'none';
      });
      // 显示选中的内容
      document.getElementById(tabId).style.display = 'block';
    }
  </script>
</body>
</html>
